<template>
    <div class="searchPage">
        <div class="search-box">
            <div class="search-input">
                <div class="user-input">
                    <div class="info">
                        <input type="text" /><button>
                            <i class="fa fa-search"></i>搜索
                        </button>
                    </div>
                </div>
                <div class="search-find">
                    搜索发现：<span>薛之谦</span><span>陈旭</span>
                </div>
            </div>
        </div>
        <div class="searchResult">
            <div class="change-serchType">
                <el-tabs
                    v-model="activeName"
                    @tab-click="handleClick"
                    :stretch="true"
                >
                    <el-tab-pane label="歌曲" name="1"
                        ><musicList
                    /></el-tab-pane>
                    <el-tab-pane label="歌手" name="100"
                        ><singerList
                    /></el-tab-pane>
                    <el-tab-pane label="专辑" name="10"
                        ><albumList
                    /></el-tab-pane>
                    <el-tab-pane label="视频" name="1014"
                        ><videoList
                    /></el-tab-pane>
                    <el-tab-pane label="MV" name="1004"
                        ><mvsList
                    /></el-tab-pane>
                    <el-tab-pane label="歌单" name="1000"
                        ><playList
                    /></el-tab-pane>
                </el-tabs>
                <div class="changPage">
                    <changeCurrentPage />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import musicList from "../../components/searchPage/MusicList";
import singerList from "../../components/searchPage/singerList";
import albumList from "../../components/searchPage/AlbumList";
import videoList from "../../components/searchPage/VideoList";
import mvsList from "../../components/searchPage/MvsList";
import playList from "../../components/searchPage/PlayList";
import changeCurrentPage from "../../components/searchPage/ChangeCurrentPage";
import "../../utils/font-awesome-4.7.0/css/font-awesome.min.css";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "searchDetails"
);
export default {
    components: {
        musicList,
        singerList,
        albumList,
        videoList,
        mvsList,
        playList,
        changeCurrentPage,
    },
    data() {
        return {
            activeName: "1",
        };
    },

    created() {
        this.getSearchHot();
        this.getSearchHotDetail();
        this.search(this.$route.params._keywords);
    },
    methods: {
        ...mapActions(["getSearchHot", "getSearchHotDetail", "search"]),
        ...mapMutations(["changeLookType"]),
        handleClick(tab, event) {
            //找到触发对象的对应的标签名，发送相应的ajax
            var arr = event.target.id.split("-");
            this.changeLookType(arr[1]);
            this.search(this.$route.params._keywords);
            console.log("我有在改哦");
        },
    },
    computed: {
        ...mapState(["hotSearchList"]),
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/searchPage.scss";
</style>